<template>
	<view class="m-field custom-search x-f" :style="containerStyle" @tap="handleTap">
		<view class="search-label" :style="labelStyle">
			<slot name="custom-label">{{ label }}</slot>
		</view>
		<view class="search-value" :style="valueStyle">
			<slot name="custom-value">{{ value }}</slot>
		</view>
		<view class="Mine_Filed_Icon">
			<slot name="custom-icon">
				<uni-icons v-if="icon" :type="icon" color="#797979" size="20" />
			</slot>
		</view>
	</view>
</template>

<script>
	/**
	 * m-field 自定义Cell组件
	 * @description 此组件用于通用cell展示	
	 * @property {String}			label				左侧显示数据
	 * @property {String | Number}		value				右侧显示数据	
	 * @property {String}				labelWidth			左侧数据占用宽度（默认：fit-content）
	 * @property {Boolean}				borderBottom		是否展示组件下方横线
	 * @property {String}				backgroundColor		组件背景色定义 （默认：透明）
	 * @property {String}				borderColor			(无效) 组件外边框颜色定义 （默认：#ccc）
	 * @property {String}				borderWidth			(无效) 组件外边框宽度 （默认：1px）
	 * @property {String}				labelAlign			文本对齐方式 (默认：left)
	 * @property {String}				labelFontSize		左侧文本字体大小
	 * @example  <m-field valueFontSize="24rpx" labelFontSize="24rpx" borderWidth="80rpx" paddings="8rpx" :borderBottom="false" label="设备" value="EquipmentName"></m-field>
	 */
	export default {
		name: "m-field",
		props: {
			label: {
				type: String,
				default: ""
			},
			value: {
				type: [Number, String, Boolean],
				default: null
			},
			labelWidth: {
				type: String,
				default: "fit-content"
			},
			borderBottom: {
				type: Boolean,
				default: true
			},
			backgroundColor: {
				type: String,
				default: "transparent"
			},
			labelAlign: {
				type: String,
				default: "left"
			},
			labelFontSize: {
				type: [Number, String],
				default: "14px" // Changed to string to be consistent with valueFontSize
			},
			valueFontSize: {
				type: [Number, String],
				default: "14px"
			},
			valueColor: {
				type: String,
				default: "#333"
			},
			valueWeight: {
				type: String,
				default: "400"
			},
			paddings: {
				type: String,
				default: "10px" // Changed to string to represent CSS value
			},
			labelColor: {
				type: String,
				default: "#999"
			},
			labelWeight: {
				type: String,
				default: "400"
			},
			overflow: {
				type: String,
				default: "ellipsis"
			},
			icon: { // Renamed from 'Icon' to 'icon' for consistency with Vue's naming conventions
				type: String,
				default: ""
			}
		},
		computed: {
			containerStyle() {
				return {
					borderBottom: this.borderBottom ? "1px solid #ccc" : "none",
					padding: this.paddings,
					backgroundColor: this.backgroundColor
				};
			},
			labelStyle() {
				return {
					width: this.labelWidth,
					textAlign: this.labelAlign,
					fontSize: this.labelFontSize,
					color: this.labelColor,
					fontWeight: this.labelWeight
				};
			},
			valueStyle() {
				return {
					fontSize: this.valueFontSize,
					color: this.valueColor,
					fontWeight: this.valueWeight,
					whiteSpace: this.overflow === "wrap" ? "normal" : "nowrap"
				};
			}
		},
		methods: {
			handleTap() {
				this.$emit("click");
			}
		}
	};
</script>

<style lang="scss">
	.custom-search {
		// @include flex(start, center)
	}

	.search-label {
		margin-right: 10px;
	}

	.search-value {
		flex: 1;
		overflow: hidden;
		overflow-x: auto;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>